<template>
  <div class="main-container">
    <div class="header">
      <h1 class="main-title">航空公司餐具管理系统主界面</h1>
      <el-button class="logout-button" type="text" @click="logout">
        <i class="el-icon-switch-button"></i>
        退出登录
      </el-button>
    </div>
    <el-button class="main-button" type="primary" @click="goToAllocationItems">
      <i class="el-icon-edit"></i>
      餐具调拨
    </el-button>
    <el-button class="main-button" type="success" @click="goToChart">
      <i class="el-icon-data-analysis"></i>
      图表
    </el-button>
    <el-button class="main-button" type="primary" @click="goToInventory">
    搜索餐具库存
    </el-button>
    <el-button class="main-button" type="info" @click="goToInboundItems">
      <i class="el-icon-upload"></i>
      餐具入库
    </el-button>
    <el-button class="main-button" type="danger" @click="goToPurchaseData">
      <i class="el-icon-money"></i>
      采购数据
    </el-button>
    <el-button class="main-button" type="info" @click="goToSearchInventory">
      <i class="el-icon-money"></i>
      餐具盘点
    </el-button>
    <el-button class="main-button" type="primary" @click="goToScrapItems">
      <i class="el-icon-delete"></i>
      餐具报废信息
    </el-button>

    <el-button class="main-button" type="primary" @click="goToUser">
      <i class="el-icon-user"></i>
      个人信息
    </el-button>
  </div>
</template>

<style>
  .main-container {
    text-align: center;
    padding-top: 50px;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
  }

  .main-title {
    font-size: 24px;
    margin: auto;
  }

  .logout-button {
    color: #00FF00;
  }

  .main-button {
    margin-bottom: 20px;
  }
</style>

<script>

  export default {
    name: 'Main',
    methods: {
      goToAllocationItems() {
        this.$router.push('/AllocationItems');
      },
      goToChart() {
        this.$router.push('/Chart');
      },
      goToMenu() {
        this.$router.push('/Menu');
      },
      goToInboundItems() {
        this.$router.push('/InboundItems');
      },
      goToPurchaseData() {
        this.$router.push('/PurchaseData');
      },
      goToScrapItems() {
        this.$router.push('/ScrapItems');
      },
      goToSearchInventory(){
        this.$router.push('/SearchInventory')
      },
      goToInventory(){
        this.$router.push('/Inventory')
      },
      goToUser() {
        this.$router.push('/User');
      },
      logout() {
        // 执行退出登录的逻辑
        // 返回登录页
        this.$router.push('/');
      }
    },
  }
</script>
